<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/info.css">
		<link rel="stylesheet" type="text/css" href="../../css/icomoon/style.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css">
		<script type="text/javascript" src="../../js/rem.js"></script>
	</head>
	<body>
		<div class="m-cal">
			<h3 class="header">
				<span>个人所得税计算器</span>
				<i class="icon-angle-left f-fl"></i>
			</h3>
			<ul class="cal-child-list">
				<li>
					<span>收入类型</span>
					<span class="f-fr">
						<input type="text" id="type" value="工资薪资所得" readonly="true">
						<i class="icon-angle-right f-fr"></i>
					</span>
				</li>
			</ul>
			<ul class="cal-child-list">
				<li>
					<span>每月工资</span>
					<span class="f-fr">
						<input type="text" placeholder="请输入">
						<small class="f-fr">元</small>
					</span>
				</li>
				<li>
					<span>社会各项保险费用</span>
					<span class="f-fr">
						<input type="text" placeholder="请输入">
						<small class="f-fr">元</small>
					</span>
				</li>
			</ul>
			<ul class="cal-child-list">
				<li>
					<span>起征额</span>
					<span class="f-fr">
						<input type="text" id="start-amount" value="国内3500元" readonly="true">
						<i class="icon-angle-right f-fr"></i>
					</span>
				</li>
			</ul>
			<div class="btn-box">
				<a class="btn">计算</a>
			</div>
			<p class="text"><i class="warning f-fl"></i><span>本页面计算结果、计算公式仅供参考，具体以实际征收规则为准。</span></p>
		</div>

		<div class="overlay">
			<div class="modal modal-cal">
				<h3 class="f-pr">
					<span>计算结果</span>
					<a class="close f-pa" id="close"></a>
				</h3>
				<ul class="cal">
					<li class="clearfix">
						<span class="f-fl">应纳税所得金额：</span>
						<span class="f-fr">6200.00元</span>
					</li>
					<li class="clearfix">
						<span class="f-fl">适用税率：</span>
						<span class="f-fr">20.00%</span>
					</li>
					<li class="clearfix">
						<span class="f-fl">速算扣除数：</span>
						<span class="f-fr">555.00元</span>
					</li>
					<li class="clearfix">
						<span class="f-fl">应缴税款：</span>
						<span class="f-fr">685.00元</span>
					</li>
					<li class="clearfix">
						<span class="f-fl">税后收入：</span>
						<span class="f-fr">10315.00元</span>
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript" src="../../js/zepto.min.js"></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../../js/mui.poppicker.js"></script>

		<script type="text/javascript">
			(function($, doc){
				$.ready(function(){
					var array = [{
						value: '1',
						text: '工资薪资所得'
					}, {
						value: '2',
						text: '年终奖'
					}, {
						value: '3',
						text: '个体商户生成经营所得'
					}, {
						value: '4',
						text: '其他'
					}];

					var picker = new $.PopPicker();
					picker.setData(array);
					var showPicker = doc.getElementById('type');
					showPicker.value = array[0].text;
					showPicker.addEventListener('tap', function(){
						picker.show(function(items){
							showPicker.value = items[0].text;
						});
					}, false);

					var array_1 = [{
						value: '1',
						text: '国内3500元'
					}, {
						value: '2',
						text: '外籍4800元'
					}];

					var picker_1 = new $.PopPicker();
					picker_1.setData(array_1);
					var showPicker_1 = doc.getElementById('start-amount');
					showPicker_1.value = array_1[0].text;
					showPicker_1.addEventListener('tap', function(){
						picker_1.show(function(items){
							showPicker_1.value = items[0].text;
						});
					}, false);
				});
			})(mui, document);

			$(function(){
				var $pop = $(".overlay");

	            function modalHidden($ele) {
	                $ele.removeClass("modal-in");
	                $ele.one("transitionend", function() {
	                    $ele.css("display", "none");
	                    $pop.removeClass("active");
	                });
	            }

	            $(".btn").on("click", function() {
	                $pop.addClass("active");
	                var $modal = $(".modal");
	                $modal.css("display", "block");
	                $modal.addClass("modal-in");

	                $("#close").on("click", function(e) {
	                    modalHidden($modal);
	                    e.stopPropagation();
	                });

	                $(".overlay").on("click", function(e) {
	                    if (e.target.classList.contains("overlay")) {
	                        modalHidden($modal);
	                    }
	                });
	            });

	            $('.icon-angle-left').on('tap', function(){
	            	mui.back();
	            });
			});
		</script>
	</body>
</html>